<template>
	<view class="all">
		<view class="searchTop">
			<u-icon name="arrow-left" color="white" size="50rpx" @click="old"></u-icon>
			<input type="text" class="inpTop" placeholder="请输入" v-model="name"/>
			<u-icon name="search" color="white" size="50rpx" style="margin-left: 1rem;" @click="getShopsList"></u-icon>
		</view>
		<view class="box" v-for="ele in shopsList" :key="ele._id" @click="getDatails(ele._id)">
			<p style="height: 80%;width: 20%;margin: 0.5rem;box-sizing: border-box;">
				<u-image :src="ele.shop_img" mode="scaleToFill" height="5rem" width="5rem"></u-image>
			</p>
			<p style="font-size: 35rpx;color: white;" class="demo">{{ele.shopname}}</p>
			<p style="display: flex;">
				<span>{{ele.stresst}}</span>
				<span>|</span>
				<span>{{ele.type}}</span>
			</p>
			<p style="display: flex;justify-content: space-between;color: white;">
				<span>营业时间:{{ele.time}}</span>
				<span>{{ele.distance}} km</span>
			</p>
			<p style="
			background-color: #252b3a;
				display: flex;
				align-items: center;
				color: white;
				font-size: 30rpx;
				margin-bottom: 0.1rem;
				height: 17%;">
				<u-icon name="bag-fill" color="red" style="margin:0.5rem ;"></u-icon>
				<span>{{ele.type}}</span>
			</p>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		defineEmits
	} from "vue";
	import {
		get_shops_list
	} from "../../../api/api";

	const name = ref();
	const shopsList = ref();
	const getShopsList = async () => {
		let res = await get_shops_list({
			name: name.value
		});
		shopsList.value = res.data;
	};
	onMounted(() => {
		getShopsList();
	});

	//跳转到详情页面
	const getDatails = (id) => {
		uni.navigateTo({
			url: "/pages/Find/Happy/Datails/Datails?id=" + id
		});
	};
	//返回上一个页面
	const old = () => {
		uni.navigateBack();
	};

</script>

<style lang="scss" scoped>
	.all {
		width: 100%;
		height: 100vh;
		background-color: black;
		color: white;
	}

	.searchTop {
		width: 100%;
		background-color: black;
		padding: 0.5rem;
		color: white;
		display: flex;
	}

	.inpTop {
		background-color: #1e2138;
		width: 60%;
		margin-left: 2rem;
		border-radius: 1.5rem;
		padding: 0.5rem;
	}
	.boxTop {
		width: 100%;
		height: 100vh;
		background-color: #1e2128;
	}

	.container {
		width: 100%;
		height: 20%;
		background-color: black;
	}


	.box {
		width: 100%;
		height: 300rpx;
		background-color: #1e2128;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		margin-bottom: 0.1rem;
		padding-top: 1rem;

		p {
			width: 60%;
			height: 25%;
			display: flex;
			line-height: 2rem;
			font-size: 20rpx;
			color: silver;
			white-space: nowrap;
			/* 防止文本换行 */
			overflow: hidden;
			/* 隐藏溢出的文本 */
			text-overflow: ellipsis;

			/* 溢出部分用省略号代替 */
			span {
				margin-right: 5%;
			}
		}
	}
</style>